<!--
 * @Date: 2022-11-29 11:02:24
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-29 12:01:22
 * @FilePath: \vue-admin-ts\src\views\main\system\components\pageSearch\index.vue
 * @Description: pageSearch
-->
<template>
  <div>
    <easy-form
      :options="props.searchFormOpt?.formItems"
      :colCount="props.searchFormOpt?.colCount"
      :colLayout="props.searchFormOpt?.colLayout"
      ref="formRef"
      v-bind="props.searchFormOpt?.attrs"
    >
      <template #action>
        <div class="action_btn">
          <el-button type="primary" @click="search" icon="search"
            >搜索</el-button
          >
          <el-button icon="refresh" @click="reset">重置</el-button>
        </div>
      </template>
    </easy-form>
  </div>
</template>
<script lang="ts" setup>
import easyForm from "@/components/Form/MyForm.vue";
import { FormInstance, FormOptions } from "@/components/Form/type/type";
import { ElButton } from "element-plus";
import { ref } from "vue";
interface IPageSearchProps {
  searchFormOpt: {
    formItems: FormOptions[];
    colCount?: number;
    colLayout?: any;
    attrs?: any;
  };
}
const props = defineProps<IPageSearchProps>();
const emits = defineEmits(["search", "reset"]);
const formRef = ref<FormInstance>();
const search = () => {
  const data = formRef.value?.getFormData();
  emits("search", data);
};
const reset = () => {
  formRef.value?.resetFields();
  emits("reset");
};
</script>
<style lang="less" scoped></style>
